<template>
  <div class="contact" id="contact">
    <div class="content w">
      <Title :data="titleData" />
      <div class="info wow animate__fadeInUp" data-wow-duration="2s">
        <div class="address">
          <span class="iconfont">&#xe605;</span>
          <h3>Our Address</h3>
          <p>A108 Adam Street, New York, NY 535022</p>
        </div>
        <div class="email">
          <span class="iconfont">&#xe618;</span>
          <h3>Email Us</h3>
          <p>contact@example.com</p>
        </div>
        <div class="phone">
          <span class="iconfont">&#xe629;</span>
          <h3>Call Us</h3>
          <p>+1 5589 55488 55</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "../Title";
export default {
  components: { Title },
  data() {
    return {
      titleData: {
        title: "Contact",
        text: "Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.",
      },
    };
  },
  mounted(){
    this.$wow.init()
  }
};
</script>

<style lang="less" scoped>
.contact {
  background-color: #f4f9fc;
  padding: 30px 0 110px;
  .info {
    display: flex;
    justify-content: space-around;
    .address {
      flex: 2;
    }
    .email,
    .phone {
      flex: 1;
    }
    .address,
    .email,
    .phone {
      margin: 0 15px;
      padding: 20px 0 30px;
      text-align: center;
      background-color: #fff;
      span {
        font-size: 32px;
        color: #67b0d1;
        padding: 8px;
      }
      h3 {
        font-size: 20px;
        color: #777777;
        font-weight: 700;
        margin: 10px 0;
      }
      p {
        padding: 0;
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 0;
      }
    }
  }
}
</style>